<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <!-- 网页图标icon -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/logn.png" />

    <!-- css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <link rel="stylesheet" href='${pageContext.request.contextPath}/iconfont/font_1/iconfont.css' />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/front-index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/mycart.css" />
    <!-- js -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/front-index.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <script src="${pageContext.request.contextPath}/js/particle.js"></script>

    <script type="text/javascript">
        $(function () {
            canvasParticle();// 使用默认配置
        });
    </script>

</head>
<body>
<div class="wrap-cc">
    <div class="content-cc">

        <!-- head -->
        <nav class="navbar navbar-default">
            <div class="container-fluid" style="box-shadow: 5px 5px 5px #9d9da8;padding-left: 20px;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <img src="${pageContext.request.contextPath}/images/com-logo1.png" alt="" width="120" style="margin-right: 20px;">
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <form action="" class="navbar-form navbar-left searchInput" style="padding:10px;">
                        <div class="form-group">
                            <input type="text" placeholder="请输入商品名称">
                        </div>
                        <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-search"></span></button>
                    </form>

                    <!-- <div id="loginOff" class="regist ccc">
                        <span style="margin-right: 20px;font-size: 14px;">下载APP</span>
                        <a href="javascript:openUserModal(false);" class="ccc">登录</a> &nbsp;&nbsp;/&nbsp;&nbsp;
                        <a href="javascript:openUserModal(true);" class="ccc">注册</a>
                    </div> -->

                    <ul id="loginOn" class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                                <img class="img-circle" src="${pageContext.request.contextPath}/images/user.jpeg" id="userImg">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu userinfo cc">
                                <li>
                                    <img src="${pageContext.request.contextPath}/images/user.jpeg" class="img-circle" alt="">
                                    <div class="">
                                        <p>itany</p>
                                        <p>账号余额: ￥<span>236</span></p>
                                    </div>
                                </li>
                                <li>
                                    <a href="front_order.html">
                                        <i class="glyphicon glyphicon-edit"></i> 我的订单
                                    </a>
                                    <a href="front_shopcart.html">
                                        <i class="glyphicon glyphicon-shopping-cart"></i> 购物车
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-toggle="modal" data-target="#userSet">
                                        <i class="glyphicon glyphicon-cog"></i> 个人设置
                                    </a>
                                    <a href="front_index.html"><i class="glyphicon glyphicon-off"></i> 退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- nav -->

        <div class="my-content">

            <table class="my-tab" >
                <thead>
                <tr class="my-tr-title" >
                    <th>
                        <!-- <input type="checkbox" /> -->
                        全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="my-check" >
                        <input type="checkbox" />
                        <img class="my-img" src="${pageContext.request.contextPath}/images/backimage.jpg" alt="图片加载失败" />
                    </td>
                    <td class="my-info" >
                        <h4><a href="">Java基础入门</a></h4>
                        <div>Java基础相关书籍 帮您快速掌握Java开发的核心要点</div>
                    </td>
                    <td class="my-money" >
                        <div class="old-price" >￥19.11</div>
                        <div class="now-price" >￥11.11</div>
                    </td>
                    <td class="my-num" >
                        <input type="button" value="-" /><input class="pro-num" type="text" value="2" readonly /><input type="button" value="+" />
                    </td>
                    <td class="my-total-money" >
                        <div>￥22.22</div>
                    </td>
                    <td class="my-options" >
                        <a href="javascript:;">删除</a>
                    </td>
                </tr>

                <tr>
                    <td class="my-check" >
                        <input type="checkbox" />
                        <img class="my-img" src="${pageContext.request.contextPath}/images/backimage.jpg" alt="图片加载失败" />
                    </td>
                    <td class="my-info" >
                        <h4><a href="">Java基础入门</a></h4>
                        <div>Java基础相关书籍 帮您快速掌握Java开发的核心要点</div>
                    </td>
                    <td class="my-money" >
                        <div class="old-price" >￥19.11</div>
                        <div class="now-price" >￥11.11</div>
                    </td>
                    <td class="my-num" >
                        <input type="button" value="-" /><input class="pro-num" type="text" value="2" readonly /><input type="button" value="+" />
                    </td>
                    <td class="my-total-money" >
                        <div>￥22.22</div>
                    </td>
                    <td class="my-options" >
                        <a href="javascript:;">删除</a>
                    </td>
                </tr>

                <tr>
                    <td class="my-check" >
                        <input type="checkbox" />
                        <img class="my-img" src="${pageContext.request.contextPath}/images/backimage.jpg" alt="图片加载失败" />
                    </td>
                    <td class="my-info" >
                        <h4><a href="">Java基础入门</a></h4>
                        <div>Java基础相关书籍 帮您快速掌握Java开发的核心要点</div>
                    </td>
                    <td class="my-money" >
                        <div class="old-price" >￥19.11</div>
                        <div class="now-price" >￥11.11</div>
                    </td>
                    <td class="my-num" >
                        <input type="button" value="-" /><input class="pro-num" type="text" value="2" readonly /><input type="button" value="+" />
                    </td>
                    <td class="my-total-money" >
                        <div>￥22.22</div>
                    </td>
                    <td class="my-options" >
                        <a href="javascript:;">删除</a>
                    </td>
                </tr>

                <tr>
                    <td class="my-check" >
                        <input type="checkbox" />
                        <img class="my-img" src="${pageContext.request.contextPath}/images/backimage.jpg" alt="图片加载失败" />
                    </td>
                    <td class="my-info" >
                        <h4><a href="">Java基础入门</a></h4>
                        <div>Java基础相关书籍 帮您快速掌握Java开发的核心要点</div>
                    </td>
                    <td class="my-money" >
                        <div class="old-price" >￥19.11</div>
                        <div class="now-price" >￥11.11</div>
                    </td>
                    <td class="my-num" >
                        <input type="button" value="-" /><input class="pro-num" type="text" value="2" readonly /><input type="button" value="+" />
                    </td>
                    <td class="my-total-money" >
                        <div>￥22.22</div>
                    </td>
                    <td class="my-options" >
                        <a href="javascript:;">删除</a>
                    </td>
                </tr>

                <tr>
                    <td class="my-check" >
                        <input type="checkbox" />
                        <img class="my-img" src="${pageContext.request.contextPath}/images/backimage.jpg" alt="图片加载失败" />
                    </td>
                    <td class="my-info" >
                        <h4><a href="">Java基础入门</a></h4>
                        <div>Java基础相关书籍 帮您快速掌握Java开发的核心要点</div>
                    </td>
                    <td class="my-money" >
                        <div class="old-price" >￥19.11</div>
                        <div class="now-price" >￥11.11</div>
                    </td>
                    <td class="my-num" >
                        <input type="button" value="-" /><input class="pro-num" type="text" value="2" readonly /><input type="button" value="+" />
                    </td>
                    <td class="my-total-money" >
                        <div>￥22.22</div>
                    </td>
                    <td class="my-options" >
                        <a href="javascript:;">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>

            <div class="cart-foot" >
                <div class="my-all-check" >
                    <input type="checkbox" />
                    <span>全选</span>
                </div>

                <div class="my-msg" >
                    <div>已选商品 <span>0</span> 件</div>
                    <div>合计(不含运费): </div>
                    <span>￥ 0.00</span>
                    <a href="javascript:;" class="my-btn" >结算</a>
                </div>

            </div>

        </div>

    </div>
</div>

<div class="footer-cc">
    <div class="foots">
        <div>版权所有： 南京网博</div>
        <div>Copyright (C) 2002-2019 itany.com 南京市网博优壹职业培训学校 苏ICP备</div>
    </div>
</div>


<div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">个人信息</h4>
            </div>
            <form action="#" class="form-horizontal" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">旧密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="password" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">新密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="newPassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="rePassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">昵称：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="nickname" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机号：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="phone" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                    <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                    <button type="submit" class="btn btn-info">确&nbsp;&nbsp;定</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
